<template>
	<view v-if="loading || error" class="loading_view">
		<u-loading mode="circle" v-if="loading" size="50"></u-loading>
		<u-toast ref="uToast" />
		<view v-if="error"><image class="icon" src="../../static/image/empty-image-error.png"></image> </view>
		<view class="messgae">{{ loading?'加载中...':'加载失败' }}</view>
	</view>
	<view v-else id="box">
		<u-toast ref="uToast" />
		<view class="item_box">
			
			<view class="item_view">
				
				<view class="item_title">我的邀请码：{{ code }}</view>
				
				<view class="item_title">已成功邀请{{ data.length }}位好友</view>
				
				<view><u-steps :list="numList" active-color="#EA4389"  mode="number" :current="curr"></u-steps></view>
				
			</view>
			
			<view class="item_view">
				
				<view class="item_title">邀请成功的好友</view>
				
				<view class="friend_list" v-if="data.length>0">
					<view class="friend_item" v-for="(v,k) in data" :key="k">好友昵称：{{ v.u_nickname }}<text class="time">{{ $u.timeFormat(v.c_endTime, 'yyyy-mm-dd') }}</text></view>
				</view>
				
				<view v-else style="width: 100%;text-align: center;">暂无邀请到好友哦！</view>
				
			</view>
			
			<view class="item_view">
				
				<view class="item_title">规则说明</view>
				
				<view class="rule_box">
					<view class="rule_item">
						<view class="rule_view rule_title">成功邀请人数</view>
						<view class="rule_view rule_title">赠送会员时长</view>
					</view>

					<view class="rule_item">
						<view class="rule_view">3人</view>
						<view class="rule_view">赠送<text>1天</text>会员</view>
					</view>
					
					<view class="rule_item">
						<view class="rule_view">5人</view>
						<view class="rule_view">赠送<text>7天</text>会员</view>
					</view>
					
					<view class="rule_item">
						<view class="rule_view">10人</view>
						<view class="rule_view">赠送<text>30天</text>会员</view>
					</view>
					
					<view class="rule_item">
						<view class="rule_view">15人</view>
						<view class="rule_view">赠送<text>90天</text>会员</view>
					</view>
					
					<view class="rule_item">
						<view class="rule_view">30人</view>
						<view class="rule_view">赠送<text>365天</text>会员</view>
					</view>
				</view>
				
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data(){
			return {
				curr:0,
				numList: [
					{
						name: '0'
					},{
					name: '3'
				}, {
					name: '5'
				}, {
					name: '10'
				}, {
					name: '15'
				}, 
				{
					name: '30'
				},
				],
				data:[],
				code:'',
				loading:false,
				error:false
			}
		},
		methods:{
			getData(){
				this.loading = true
				
				this.error = false
				
				let that = this
				
				this.$request({
					url:'/user/invitation',
					data:{},
					method:'post',
					success(res){
						if(res.statusCode==200){
							
							if(res.data.code==1){
								
								that.data = res.data.data.data
								
								that.code = res.data.data.code
								
								uni.setClipboardData({
								    data: that.code,
								    success: function () {
								        console.log('邀请码复制成功s');
								    },
									fail(err){
										// console.log(err)
									}
								})
								
								let num = that.data.length
								
								let curr=-1;
								
								for(var i in that.numList){
									if(num>=that.numList[i].name){
										curr++
									}else{
										break
									}
								}
								
								that.curr = curr
								
							}else{
								that.error = true
								
								that.$refs.uToast.show({
									title: res.data.msg,
									type: 'warning'
								})
							}
							
						}else{
							that.error = true
							
							that.$refs.uToast.show({
								title: '网络繁忙',
								type: 'warning'
							})
						}
					},
					fail(err){
						
						that.error = true
						
						that.$refs.uToast.show({
							title: '请求失败',
							type: 'warning'
						})
					},
					complete(){
						that.loading = false
					}
				})
			}
		},
		onLoad(){	
			this.getData()
		}
	}
</script>

<style>
	#box{
		width:750rpx;
		min-height: 100vh;
		background: url(http://wx.jianmeijiayuan.com/static/image/xddd729cd3-08e2-4516-a7d8-b56c06775a95.png);
		background-size: 100% 100%;
	}
	/* http://wx.90it.com.cn/static/image/open_screen.png */
	.item_box{
		width:750rpx;
		padding-top: 450rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 30rpx;
	}
	.item_box .item_view{
		width: 650rpx;
		padding: 30rpx;
		color:#fff;
		background-color: rgba(0,0,0,0.2);
		border-radius:10rpx;
		margin-bottom: 20rpx;
	}
	.item_box .item_view .item_title{
		margin-bottom: 20rpx;
	}
	.item_box .item_view .friend_list{
		display: flex;
		flex-direction: column;
		overflow: auto;
		max-height: 220rpx;
	}
	.item_box .item_view .friend_list .friend_item{
		margin-top:10rpx;
		font-size: 26rpx;
		display: flex;
		justify-content: space-between;
	}
	.item_box .item_view .rule_box{
		display: flex;
		flex-direction: column;
	}
	.item_box .item_view .rule_box .rule_item{
		display: flex;
		margin-top: 20rpx;
	}
	.item_box .item_view .rule_box .rule_item .rule_view{
		flex:1;
		text-align: center;
		font-size: 26rpx;
	}
	.item_box .item_view .rule_box .rule_item .rule_title{
		font-size: 28rpx;
	}
	.item_box .item_view .rule_box .rule_item .rule_view text{
		color:red;
	}
</style>
